<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.regist {
  width: 90%;
  padding-left: 3%;
  .regists{
    background: #FFF;
    overflow:hidden;
    width:100%
  }
  
  .rinputs {
    width: 90%;
  }
  .rgbtns {
    width: 200px;
  }
}
.avatar-uploader{
  width:100%;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  width:100%;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #999;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  width:100%;
  font-size: 28px;
  color: #FFF;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width:100%;
  height: 178px;
  display: block;
}

.item2{
  padding-top:.5rem;
  border-left:1px #e5e5e5 solid; 
  padding-left:10px;
  width:70%;
  padding-right: 10px;
}
</style>
<template>
  <div class="regist">
    <h1 class="pull-left" style="font-size:25px;">添加图文信息</h1>
    <div class="regists">
      <div>
        <div class="pull-left" style="padding-top:2rem; padding-left:10px; padding-right:20px; width:25%">
          <div>请上传主题图片(图片尺寸1920*1080)</div>
          <el-upload
            class="avatar-uploader"
            action="/until/upimgs"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="form.banner" :src="form.banner" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="margin-top:3rem;color:#999;">
            <div>文章标题</div>
            <el-input size="small" class="rinputs" clearable v-model="form.title"></el-input>
          </div>
          <div style="margin-top:10px;color:#999;">
            <div>文章类型</div>
            <el-select v-model="form.tab" style="width:90%;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
          <div style="margin-top:10px;color:#999;">
            <div>文章简介</div>
            <el-input type="textarea" :rows="3" size="small" class="rinputs"  v-model="form.remark"></el-input>
          </div>
          <div style="margin-top:10px;color:#999;">
            <div>文章状态</div>
            <br/>
            <el-switch
              style="display: block"
              v-model="form.deleted"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="已上架"
              inactive-text="已下架">
            </el-switch>
          </div>
        </div>
        <div class="pull-left item2">
          <div>
            <h1>文章内容</h1>
            <vue-editor id="editor"
              style="height:800px;margin-bottom:80px;"
                useCustomImageHandler
                @imageAdded="handleImageAdded" v-model="form.content">
            </vue-editor>
             <h3 style="margin-top:7rem;text-align:center;">
              <el-button type="primary" @click="articleupdate" class="rgbtns">修改图文</el-button>
            </h3>
          </div>
        </div>
      </div>
      <div style="width:100%;overflow:hidden;"></div>
    </div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import axios from "axios";
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      id: '',
      form: {
        tab:"",
        title: "",
        remark: "",
        content: "",
        banner: '',
        shoptoplvid: '',
        author: '',
        avatarUrl: ''
      },
      options: [],
      pinData: [],

    };
  },
  computed: {
    userInfo(){
      return this.$store.state.admin;
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getData();
  },
  methods: {
    async articleupdate(){
      try {
        let result = await this.$http.post("/article/updateone", {id:this.id,form: this.form});
        this.getmessage(result.data.data,'修改');
      } catch (error) {
        console.log(error)
      }
    },
    handleAvatarSuccess(res, file) {
      this.form.banner = res.url;
    },
    async onSubmit() {
      try {
        if(this.form.banner==''){
          this.$message('请上传图片');
          return null;
        }
        if(this.form.title==''){
          this.$message('请填写标题');
          return null;
        }
        if(this.form.tab==''){
          this.$message('请选择文章类型');
          return null;
        }
        if(this.form.remark==''){
          this.$message('请填写摘要');
          return null;
        }
        if(this.form.content==''){
          this.$message('请填写文章内容');
          return null;
        }
        let result = await this.$http.post("/article/add", this.form);
        if(result.status==200&&result.data.data==1){
          this.$message({
            message: '恭喜你，添加成功！',
            type: 'success'
          });
          this.goto('/strategy')
        }
      } catch (error) {}
    },


    async handleImageAdded(file, Editor, cursorLocation) {
      var formData = new FormData();
      formData.append("image", file);
      axios({
        url: "/until/upimg",
        method: "POST",
        data: formData
      })
        .then(result => {
          let url = result.data.url; // Get url from response
          Editor.insertEmbed(cursorLocation, "image", url);
        })
        .catch(err => {
          console.log(err);
        });
    },
    async getData(){
      try {
        let result = await this.$http.post("/article/getone", {id: this.id});
        if(result.status==200&&result.data.data==1){
          this.form = result.data.result;
        }
      } catch (error) {
        console.log(error)
      }

      try {
        let result = await this.$http.get("/admin/requeOther", {params:{name:'articleTab'}});
        this.options = result.data.array
      } catch (error) {
        console.log(error)
      }

      try {
        let result = await this.$http.post("/reply/getping", {articleid: this.id, page: 1, size: 10});
        if(result.status==200&&result.data.data==1){
          this.pinData = result.data.result.result;
        }
      } catch (error) {
        console.log(error)
      }
    },


    getTime(num) {
      let t = new Date(num);
      return (
        t.getFullYear() + 
        "年" +
        (t.getMonth() + 1) + 
        "月" +
        t.getDate() + 
        "日 "+
        t.getHours() +
        ":" +
        t.getMinutes() +
        ":" +
        t.getSeconds()
      );
    },
  }
};
</script>